<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>批量导入志愿者信息</title>
    <script type="text/javascript" src="${ctx}/static/myJs/util.js"></script>
    <script type="text/javascript" src="${ctx}/static/myJs/volunteerController.js"></script>
    <script type="text/javascript" src="${ctx}/static/jquery/jquery.form.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#upload").click(function () {
                subForm();
            });
        });

        //-------------------form---------------------------------

        //表單的異步提交

        var options = {

            //iframe:true,

            dataType:"json", // 或'script'，不能用'json'，这种方式在三种浏览器中都不行，即回调函数不执行
            type:'post',
            contentType: "application/json; charset=utf-8",
            url: "${ctx}/volunteer/importExcel", //http://localhost:8080/SHOPcity/fileupload.jsp

            beforeSubmit:showRequest,  // pre-submit callback

            success:showResponse,

            clearForm:true

            // other available options:

            // target:'#baseInfo_iframe'   // target element(s) to be updated with server response

            //resetForm: true        // reset the form after successful submit

            // $.ajax options can be used here too, for example:

            //timeout:   3000

        };

        function subForm(){
            $("#myform").ajaxSubmit(options);
        }

        function showRequest(formData, jqForm, options) {

            var queryString = $.param(formData);
        }

        function showResponse(responseText, statusText)   {

            alert(responseText.message);

        }

    </script>
    <style>
        .box{
            height: 300px;
            width: 600px;
            padding: 60px 0 0 150px;
            position: relative;
            background-color: #fff;
            border: 1px solid #dfdfdf;
            border-radius: 4px;
            box-shadow: 0 1px 2px 0 rgba(158, 158, 158, .2);

        }
        .position{
            position: absolute;
            bottom: 160px;
            left: 150px;
        }
        .btn {
            display: block;
            padding: 8px 20px !important;
            letter-spacing: 1px;
            font-size: 18px;
        }
        .btn2 {
            background-color: #3186c8;
            color: #000;
            width: 150px;
            outline: none;
            font-size: 18px;
            letter-spacing: 1px;
            padding: 6px 20px !important;
            -moz-user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
            cursor: pointer;
            display: inline-block;
            font-size: 16px;
            font-weight: normal;
            line-height: 1.42857;
            margin-bottom: 0;
            padding: 2px 12px;
            text-align: center;
            vertical-align: middle;
            white-space: nowrap;
        }
        .a-upload {
            padding: 4px 10px;
            height: 30px;
            line-height: 20px;
            position: relative;
            cursor: pointer;
            color: #888;
            background: #fafafa;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            display: inline-block;
            *display: inline;
            *zoom: 1
        }

        .a-upload  input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer
        }

        .a-upload:hover {
            color: red;
            background: #eee;
            border-color: #ccc;
            text-decoration: none
        }
        .download{
            position: absolute;
            left: 150px;
            bottom: 120px;
        }
    </style>
</head>
<body>

<div class="content">
    <form name="myform" id="myform"  enctype="multipart/form-data" action="${ctx}/volunteer/importExcel" method="post"
       class="box" >
        <a href="javascript:;" class="a-upload">
        <input type="file" name="alais" class="btn"/>点击这里上传文件
        <!--
        <input type="file" name="file2" /> <input type="text" name="alais2" /><br />
        <input type="file" name="file3" /> <input type="text" name="alais2" /><br />
        -->
            </a>
            <a class="position">
        <button type="button" id="upload" class="btn2">提交</button>
            </a>
        <a href="${ctx}/static/download/志愿者导入模板.zip" class="download">下载模板</a>
    </form>


</div>

</body>
</html>